<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">
      短信配置
      <span class="notice"
        >(
        注意：每项最多设置3个电话号码，设置多个接收号码请用‘,’隔开；开启则推送短信通知，关闭不推送
        )</span
      >
    </div>
    <!-- 列表 -->
    <div style="margin: 10px">
      <el-table
        :data="msgTemplateData"
        border
        align="center"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="moduleName"
          label="场景名称"
          width="150"
        ></el-table-column>
        <el-table-column label="电话号码" width="400">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.mobiles"
              placeholder="请设置接收手机号"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="短信内容">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.content"
              type="textarea"
              :rows="1"
              placeholder="请设置要发送的短信内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否开启" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isOpen"
              :width="50"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn-submit">
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios/index'
import base from '../../assets/scripts/base/base'
export default {
  name: 'msgSetting',
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      sceneData: [], // 场景数据
      msgSaveData: [], // 现有的短信模板数据
      msgTemplateData: [] // 短信模板初数据
    }
  },
  mounted () {
    this.handleGetMsgTempData()
    this.handleGetSceneData()
  },
  methods: {
    // 短信模板初始数据
    handleGetMsgTempData () {
      let url = this.$base.getUrl('roswarnsmstempletList')
      let params = {
        url: url,
        data: {
          deptId: 33,
          page: 1,
          limit: 1000
        }
      }
      this.$store.dispatch('postForm', params).then((res) => {
        this.msgSaveData = res.page.list
      })
    },
    // 获取场景数据
    handleGetSceneData () {
      let _this = this
      let url = this.$base.getUrl('getSceneInfoTree')
      let params = {
        url: url,
        data: {
          deptId: 33
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (_this.msgSaveData.length) {
          let msgTempData1 = []
          let msgTempData2 = []
          let msgTempData3 = []
          res.nodes.map((item, index) => {
            msgTempData1.push({
              moduleName: item.moduleName,
              moduleId: item.moduleId,
              mobiles: item.mobiles ? item.mobiles : '',
              content: item.content ? item.content : '',
              isOpen: item.isOpen ? item.isOpen : '0'
            })
            _this.msgSaveData.map((val, idx) => {
              if (val.moduleId === item.moduleId) {
                msgTempData1.splice(res.nodes.indexOf(item), 1)
                let newItem = { ...val, ...item }
                msgTempData2.push({
                  moduleName: newItem.moduleName,
                  moduleId: newItem.moduleId,
                  mobiles: newItem.mobiles ? newItem.mobiles : '',
                  content: newItem.content ? newItem.content : '',
                  isOpen: newItem.isOpen ? newItem.isOpen : '0'
                })
              }
            })
          })
          msgTempData3 = [...msgTempData1, ...msgTempData2]
          let hash = {}
          _this.msgTemplateData = msgTempData3.reduceRight((preVal, curVal) => {
            // eslint-disable-next-line
            hash[curVal.moduleId]
              ? ''
              : (hash[curVal.moduleId] = true && preVal.push(curVal))
            return preVal
          }, [])
        } else {
          res.nodes.map((item, index) => {
            this.msgTemplateData.push({
              moduleName: item.moduleName,
              moduleId: item.moduleId,
              mobiles: '',
              content: '',
              isOpen: '0'
            })
          })
        }
      })
    },
    // 保存短信模板信息
    handleSubmit () {
      let that = this
      let Base = base()
      let loadingOpts = {
        lock: true,
        text: '拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      }
      let tempArr = []
      this.msgTemplateData.map((item, index) => {
        tempArr.push(
          [item.moduleId, item.mobiles, item.content, item.isOpen].join('|')
        )
      })
      let url = this.$base.getUrl('roswarnsmstempletSaveBatch')
      let data = {
        deptId: 33,
        templet: tempArr.join(';')
      }
      let loading = that.$loading(loadingOpts)
      axios
        .post(url, data, {
          headers: {
            token: Base.getSessionStorage('token')
          }
        })
        .then((res) => {
          loading.close()
          if (res.data.code === 403) {
            that.$alert('登录信息失效，请重新登录')
            Base.setSessionStorage('token', '')
            that.commit('changeLoginShow', true)
            return
          }
          if (res.data && res.data.code === 0) {
            that.$message({
              type: 'success',
              message: '保存成功！'
            })
          }
          if (res.data.code === 500) {
            that.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })
      // this.$store.dispatch('postForm', params).then(res => {
      //   console.log(res)
      // })
    }
  }
}
</script>
<style scoped>
.el-table {
  width: auto !important;
  text-align: center;
  margin: 10px;
}
.notice {
  font-weight: normal;
  margin: 20px;
  color: rgb(235, 61, 61);
}
.btn-submit {
  text-align: center;
}
.el-table >>> .el-input__inner {
  border-color: #8c8b8b;
}
.el-table >>> .el-textarea__inner {
  border-color: #8c8b8b;
}
.el-table >>> th {
  text-align: center;
}
</style>
